<template>
  <div class="sum">
    <div class="panle">
      <div class="title">高铁票务综合管理系统</div>
      <el-form :model="form" label-width="80px">
        <el-form-item label="账号" class="input1">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" class="input2">
          <el-input v-model="form.password" show-password></el-input>
          <div class="tips">
            <a plain @click="open1">忘记密码 </a>

            <a href="/#/register">没有账号?去注册</a>
          </div>
        </el-form-item>
        <el-button @click="btn" class="login">登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ElNotification } from "element-plus";
import { h } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import useCounter from "@/store/counter";
import { getLoginApi } from "@/api/user.js";
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
import { Loading } from "element-plus/es/components/loading/src/service";
import pinia from "@/store";
const form = reactive({
  password: "",
  account: "",
});
const counterStore = useCounter(pinia);
const router = useRouter();
const btn = async () => {
  const params = {
    username: form.username,
    password: form.password,
  };
  try {
    const res = await getLoginApi(params);
    console.log("登陆成功反馈", res);
    counterStore.setCredentiala(res.data.Username, res.data.ID, res.data.UUID);
    if (res.data.Token) {
      console.log(res.data.Token);
      localStorage.setItem("token", res.data.Token);
    }

    if (res.message === "success") {
      ElMessage({
        message: "登录成功！",
        type: "success",
      });
      // 跳转页面
      router.push("/home");
    } else {
      ElMessage({
        message: "登录失败！请重试",
        type: "error",
      });
    }
  } catch (error) {
    console.log(error);
  }
};
// 忘记密码提示
const open1 = () => {
  ElNotification({
    title: "提示",
    message: "请联系管理员重置密码！",
    type: "warning",
  });
};
</script>

<style lang="scss" scoped>
html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.sum {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 750px;
  overflow: hidden;
  background: linear-gradient(to right bottom, #ffffff, #858585);
}
.panle {
  width: 400px;
  height: 420px;
  background: white;
  border-radius: 10px;
  padding: 25px;
}
.title {
  width: 100%;
  height: 60px;
  color: #858585;
  font-weight: 600;
  text-align: center;
  line-height: 60px;
  margin-bottom: 30px;
  font-size: 20px;
}
.login {
  width: 50%;
  color: #858585;
  margin-left: 25%;
}
.input1 {
  width: 360px;
  margin-bottom: 40px;
}
.input2 {
  width: 360px;
  margin-bottom: 40px;
}
.tips {
  width: 320px;
  display: flex;
  justify-content: space-between;
}

a {
  text-decoration: none;
  color: #858585;
  cursor: pointer;
}
</style>
